<template>
    <div class="content">
         <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
         <div class="formContain">
            <titlebar :title-left='titleLeft1'></titlebar>
            <ul>
              <!--<li class="flex" style="position: relative">
                <span class="label"><i class="require">*</i>申请人</span>
                <div>
                  <input type="text" style="width: 10rem"  id="applyPerson" placeholder="请选择申请人" @input="searchApply">
                </div>
                <ul v-show="applysearch" class="search">
                  <li @click="applychose" :id="item.id" v-for="item in applyList">
                    {{item.orgName}}-{{item.postName}}-{{item.name}}
                  </li>
                </ul>
              </li>-->
                <li class="flex" style="position: relative">
                  <span class="label"><i class="require">*</i>被调班人员</span>
                  <div>
                    <input type="text" style="width: 10rem"  id="checkPerson" placeholder="请选择被调人员" @input="searchBPerson">
                  </div>
                  <ul v-show="search" class="search">
                    <li @click="chose" :id="item.id" v-for="item in personList">
                     {{item.orgName}}-{{item.postName}}-{{item.name}}
                    </li>
                  </ul>
                </li>
                <li class="flex">
                    <span class="label"><i class="require">*</i>原定班次开始时间</span>
                    <div @click="showdatepicker($event,'startTimeOld')">
                      <input type="text"  id="beginold" placeholder="请选择时间" :value="datas.startTimeOld"  readonly>
                      <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
                    </div>
                </li>
                 <li class="flex">
                    <span class="label"><i class="require">*</i>原定班次结束时间</span>
                   <div @click="showdatepicker($event,'endTimeOld')">
                     <input type="text"  id="endold" placeholder="请选择时间" :value="datas.endTimeOld"  readonly>
                     <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
                   </div>
                </li>
                  <li class="flex">
                      <span class="label"><i class="require"></i>原班次</span>
                    <div>
                        <van-field v-model="datas.classOldName" disabled placeholder="原班次" type="text" input-align="right"/>
                    </div>
                </li>
                 <li class="flex">
                      <span class="label"><i class="require">*</i>共计调整天数</span>

                    <div>
                      <div class="van-cell van-field number-input">
                        <div class="van-cell__value van-cell__value--alone">
                          <div class="van-field__body">
                            <MyNumberInput :point="1" :max="999999" placeholder="请输入总天数" v-model.number="datas.changeDaysOld"></MyNumberInput>
                          </div>
                        </div>
                      </div>
                    </div>
                </li>
                 <li class="flex">
                    <span class="label"><i class="require">*</i>调整班次开始日期</span>
                   <div @click="showdatepicker($event,'startTimeChanaged')">
                     <input type="text"  id="beginchange" placeholder="请选择时间" :value="datas.startTimeChanaged"  readonly>
                     <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
                   </div>
                </li>
                 <li class="flex">
                    <span class="label"><i class="require">*</i>调整班次结束日期</span>
                   <div @click="showdatepicker($event,'endTimeChanaged')">
                     <input type="text"  id="endchange" placeholder="请选择时间" :value="datas.endTimeChanaged"  readonly>
                     <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
                   </div>
                </li>
                  <li class="flex">
                      <span class="label"><i class="require"></i>调整班次</span>
                    <div>
                        <van-field v-model="datas.classChanagedName" disabled placeholder="调整班次" type="text" input-align="right"/>
                    </div>
                </li>
                 <li class="flex">
                      <span class="label"><i class="require">*</i>共计调整天数</span>
                    <div>
                      <div class="van-cell van-field number-input">
                        <div class="van-cell__value van-cell__value--alone">
                          <div class="van-field__body">
                            <MyNumberInput :point="1" :max="999999" placeholder="请输入总天数" v-model.number="datas.changeDaysChanaged"></MyNumberInput>
                          </div>
                        </div>
                      </div>
                     </div>
                </li>
            </ul>

        </div>
        <!-- <div class="formContain">
            <titlebar :title-left='titleLeft2'></titlebar>
            <ul>

                <li class="flex">
                    <span class="label">原定班次开始时间</span>
                    <div>
                        <span>2019-04-24&nbsp;&nbsp;&nbsp;&nbsp;9：00</span>
                    </div>
                </li>
                 <li class="flex">
                    <span class="label">原定班次结束时间</span>
                    <div>
                        <span>2019-04-24&nbsp;&nbsp;&nbsp;&nbsp;13：00</span>
                    </div>
                </li>
                  <li class="flex">
                      <span class="label">原班次</span>
                    <div>
                        <van-field v-model="datas.dayLength" placeholder="系统自动带出" type="text" input-align="right"/>
                    </div>
                </li>
                 <li class="flex">
                      <span class="label">共计调整天数</span>
                    <div>
                        <van-field v-model="datas.dayLength" placeholder="请输入总天数" type="number" input-align="right"/>
                    </div>
                </li>
                 <li class="flex">
                    <span class="label">调整班次开始日期</span>
                    <div>
                        <span>2019-04-24&nbsp;&nbsp;&nbsp;&nbsp;9：00</span>
                    </div>
                </li>
                 <li class="flex">
                    <span class="label">调整班次结束日期</span>
                    <div>
                        <span>2019-04-24&nbsp;&nbsp;&nbsp;&nbsp;13：00</span>
                    </div>
                </li>
                  <li class="flex">
                      <span class="label">调整班次</span>
                    <div>
                        <van-field v-model="datas.dayLength" placeholder="系统自动带出" type="text" input-align="right"/>
                    </div>
                </li>
                 <li class="flex">
                      <span class="label">共计调整天数</span>
                    <div>
                        <van-field v-model="datas.dayLength" placeholder="请输入总天数" type="number" input-align="right"/>
                    </div>
                </li>
            </ul>

        </div>-->
         <div class="formContain">
            <titlebar :title-left='titleLeft3'></titlebar>
            <ul>
                <li class="flex">
                    <div class='full_width' style="min-height:2rem">
                      <i class="require">*</i>
                      <van-field class='full_width'  rows="1" autosize v-model="datas.remark" placeholder="请输入调班原因" type="textarea" input-align="left"/>
                    </div>
                </li>
                <li class="flex">
                    <span class="label">上传附件</span>
                    <div>
                      <input type="text" v-model="fileName" disabled style="background: transparent;width: 10rem;position: absolute;padding-right: 1rem">
                      <van-uploader :after-read="afterRead" :before-read="beforeRead" id="file">
                        <span class="iconfont icon-hao"></span>
                      </van-uploader>
                    </div>
                </li>
            </ul>
         </div>
          <div class="align_center foot-button" >
              <van-button class="cancel-btn" type="primary" @click="$router.go(-1)">取消</van-button>
            <van-button class="primary-btn" type="primary" @click="saveChange">提交</van-button>
         </div>
        <van-picker id="picker"   show-toolbar  :title="title" v-show='pickershow' :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        <van-datetime-picker v-show='show' id="datetime-picker" type="datetime" @confirm="datetimeSelect" @cancel='cancel' v-model="currentTime" />
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
     import titlebar from '@/components/titlebar3/titlebar3';
    import {canSave,startProcess,uploadFile,processInstance,searchPerson,saveClassChange,getWorkClassInfo} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    import { Dialog,Toast,NumberKeyboard} from 'vant';
    import MyNumberInput from '@/components/numberInput/numberInput';
    export default {
    	data(){
            return{
              showKeyboard: true,
                profiletitle:'调班',
                goBack:true,
                titleLeft1:'个人调班信息',
                titleLeft2:'与他人调班信息',
                titleLeft3:'调班事由',
                show:false, //控制日期显示隐藏
                pickershow:false,//控制下拉选显示隐藏
                pickerName:'',//当前控制日期的控件
                currentTime:new Date(),
                search:false,
                applysearch:false,
                fileName:'',
                screenHeight:'',
                startManagerId:'',
                bussinessTable:'ACT_ATND_CLASS_CHANGE',
                personList:[],
                applyList:[],
                changeName:'',
                datas:{
                  applyUser:"",
                  applyUserName:"",
                  chanedUserName:"",
                  chanedUser:"",
                  startTimeOld:"",
                  endTimeOld:"",
                  classOld:"",
                  classOldName:'',
                  changeDaysOld:"",
                  startTimeChanaged:"",
                  endTimeChanaged:"",
                  classChanaged:"",
                  classChanagedName:"",
                  changeDaysChanaged:"",
                  remark:"",
                  attachmentId:""
                },
                title:'标题',//下拉框标题
                columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']  //下拉框数据
            }
        },
      /*
      * {
 "personId":"67C078477271419DBE21C52C3E27BF4A",
 "atndStartDate":"2018-07-31 10:00:00",
 "atndEndDate":"2018-07-31 10:00:00"
}
      *
      * */
        created(){
          var processData = {};
          processData.processDefinitionKey = 'classChangeTheProcess';
          processData.app_userId = getStore('user_id');
          processData.CHECK_TIME = new Date().getTime().toString();
          processData.CHECK_SIGN = this.$md5(processData.app_userId + processData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
          // processData = JSON.stringify(processData);
          startProcess(processData).then(res=>{
//            console.log(res);
            this.startManagerId = res.data.startManagerId;
          });
        },
        mounted(){
          this.screenHeight = document.documentElement.clientHeight;
        },
        updated () {
          let that = this;
          this.$nextTick(function () {
            let $inputs = Array.from(document.getElementsByTagName('input'));
            /*let body = document.body;
            $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
                item.onblur = function () { // onblur是核心方法
                    clearTimeout(body.timer);
                    body.timer = setTimeout(() => {
                    window.scroll(0, 0);
                    window.innerHeight = window.outerHeight = that.screenHeight
                    }, 150)
                }
                item.onfocus = function () {
                    clearTimeout(body.timer)
                }
            })*/
            let body = document.body;
            $inputs.forEach(item => {
              item.onblur = function () { // onblur是核心方法
                window.scroll(0, 0);
                window.innerHeight = window.outerHeight = that.screenHeight;
                //console.log(that.screenHeight);
              }
            })
          })
        },
        components:{
            headTop,
            titlebar,
          MyNumberInput
        },
        methods:{
            addZero(num){
              var addNum = num<10?"0"+num:num;
              return addNum;
            },
            datetimeSelect(value){
                this.show = false;
                var date = value;
                var val = date.getFullYear() + '-'+this.addZero(date.getMonth()+1) + '-'+ this.addZero(date.getDate())+' '+this.addZero(date.getHours()) + ':'+ this.addZero(date.getMinutes())+':'+"00";
                this.$set(this.datas,this.pickerName,val);
                // document.getElementById(this.pickerName).value = val;
              if(this.datas.endTimeOld != ""){
                if(this.datas.startTimeOld >= this.datas.endTimeOld){
                  Dialog.alert({
                    title: '',
                    message: '开始时间不能大于结束时间'
                  });
                  this.datas.endTimeOld = '';
                }else {
                  var data = {};
                  data.app_userId = getStore('user_id');
                  data.personId = getStore('user_id');
                  data.atndStartDate = this.datas.startTimeOld;
                  data.atndEndDate = this.datas.endTimeOld;
                  data.CHECK_TIME = new Date().getTime().toString();
                  data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                  getWorkClassInfo(data).then(res=>{
                    console.log(res,"调班信息");
                    if(res.data.result_value == ""){
                      Dialog.alert({
                        title: '提示',
                        message: '暂无排班信息'
                      });
                    }else {
                      this.datas.classOld = res.data.result_value;
                      this.datas.classOldName =res.data.result_text;
                    }

                  })
                }
              };

              /*调班时间以及调班班次查询*/
              if(this.datas.endTimeChanaged != ""){
                if(this.datas.startTimeChanaged >= this.datas.endTimeChanaged){
                  Dialog.alert({
                    title: '',
                    message: '开始时间不能大于结束时间'
                  });
                  this.datas.endTimeChanaged = '';
                }else {
                  if(this.datas.chanedUser == ''){
                    Dialog.alert({
                      title: '提示',
                      message: '请先选择被调班人员'
                    });
                  }else {
                    var data = {};
                    data.app_userId = getStore('user_id');
                    data.personId = this.datas.chanedUser;
                    data.atndStartDate = this.datas.startTimeChanaged;
                    data.atndEndDate = this.datas.endTimeChanaged;
                    data.CHECK_TIME = new Date().getTime().toString();
                    data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                    getWorkClassInfo(data).then(res=>{
                      console.log(res,"调班信息");
                      if(res.data.result_value == ""){
                        Dialog.alert({
                          title: '提示',
                          message: '暂无排班信息'
                        });
                      }else {
                        this.datas.classChanaged = res.data.result_value;
                        this.datas.classChanagedName = res.data.result_text;
                      }

                    })
                  }

                }
              };
            },
            onConfirm(value){
                this.$set(this.datas,this.pickerName,value);
                 this.pickershow = false;
            },
            cancel() {
                this.show = false;
            },
            onCancel(){
                this.pickershow = false;
            },
            showdatepicker(event,name){
                this.show = true;
                this.pickerName = name;
            },
            showpicker(event,name,title){
                this.pickershow = true;
                this.pickerName = name;
                this.title = title;
            },
            beforeRead(file) {
              var imgType = file.type.toLocaleLowerCase();
              if (imgType != 'image/jpg'&&imgType != 'image/jpeg'&&imgType != 'image/png'&&imgType != 'image/gif'&&imgType != 'image/bmp') {
                Toast('请上传图片');
                return false;
              }

              return true;
            },
            afterRead(file) {
              // 此时可以自行将文件上传至服务器
              //console.log(file.file.name);
              Toast.loading({
                duration: 0,   // 持续展示 toast
                mask: true,
                message: '正在上传...'
              });
              var formData = new FormData();
              formData.append("uploadFile", file.file);
              uploadFile(formData).then(res=>{
                this.fileName = file.file.name;
//                console.log(res);
                this.datas.attachmentId = res.fileId;
                Toast.clear();
              })
            },
          /*申请人搜索*/
//            searchApply(){
//              var data = {};
//              data.name = document.getElementById("applyPerson").value;
//              data.appUserId = getStore('user_id');
//              data.app_userId = getStore('user_id');
//              data.CHECK_TIME = new Date().getTime().toString();
//              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
//              if(data.name!= ''){
//                searchPerson(data).then(res=>{
//                  this.applysearch = true;
//                  this.applyList = res.data;
//                })
//              }else {
//                this.applyList = [];
//                this.applysearch = false;
//              }
//            },
          /*被申请人搜索*/
            searchBPerson(){
              var data = {};
              data.name = document.getElementById("checkPerson").value;
              data.appUserId = getStore('user_id');
              data.app_userId = getStore('user_id');
              data.CHECK_TIME = new Date().getTime().toString();
              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              if(data.name!= ''){
                searchPerson(data).then(res=>{
                  this.search = true;
                  this.personList = res.data;
                })
              }else {
                this.personList = [];
                this.search = false;
              }

            },
            /*申请人选择*/
//            applychose(event){
//              //console.log(event.target.getAttribute("id"));
//              document.getElementById("applyPerson").value = event.target.innerText;
//              this.applysearch = false;
//              this.datas.applyUser = event.target.getAttribute("id");
//              this.datas.applyUserName = event.target.innerText;
//              this.applyList = [];
//            },

          /*被调班人选择*/
            chose(event){
              //console.log(event.target.getAttribute("id"));
              document.getElementById("checkPerson").value = event.target.innerText;
              this.search = false;
              this.datas.chanedUser = event.target.getAttribute("id");
              this.datas.chanedUserName = event.target.innerText;
              this.personList = [];
              var data = {};
              data.app_userId = getStore('user_id');
              data.personId = this.datas.chanedUser;
              data.atndStartDate = this.datas.startTimeChanaged;
              data.atndEndDate = this.datas.endTimeChanaged;
              data.CHECK_TIME = new Date().getTime().toString();
              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              getWorkClassInfo(data).then(res=>{
                if(res.data.result_value == ""){
                  Dialog.alert({
                    title: '提示',
                    message: '暂无排班信息'
                  });
                }else {
                  this.datas.classChanaged = res.data.result_value;
                  this.datas.classChanagedName = res.data.result_text;
                }
              })
            },
          saveChange(){
            Toast.loading({
              duration: 0,   // 持续展示 toast
              mask: true,
              message: '正在提交...'
            });
            var savaChangeDatas = this.datas;
            savaChangeDatas.applyUser = getStore('user_id');
            savaChangeDatas.app_userId = getStore('user_id');
            savaChangeDatas.CHECK_TIME = new Date().getTime().toString();
            savaChangeDatas.CHECK_SIGN = this.$md5(savaChangeDatas.app_userId + savaChangeDatas.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
//            console.log(savaChangeDatas);

            var data = {};
            data.app_userId = getStore('user_id');
            data.processRespondentUserId = getStore('user_id');
            data.day = this.datas.changeDaysOld;
            data.processType = "KQ";
            data.CHECK_TIME = new Date().getTime();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            data.startManagerId = this.startManagerId;
            data.bussinessTable = this.bussinessTable;
            data.processDefinitionKey = 'classChangeTheProcess';

            // 判断是否可以提交
            canSave(data).then(res=>{
              if(res.code == 200){
                if(!res.data.flag){
                  Toast.clear();
                  Dialog.confirm({
                    title: '提示',
                    message: res.data.message
                  }).then(() => {
                    saveClassChange(savaChangeDatas).then(res=>{
                      if(res.code == 200){
                        data.bussinessIds = res.data;
                        processInstance(data).then(res1=>{
                          if(res1.code == 200){
                            Toast.clear();
                            Dialog.alert({
                              title: '提示',
                              message: '提交审批成功'
                            }).then(() => {
                              this.$router.go(-1);
                            });
                          }
                        })
                      }else if(res.code == 400){
                        Toast.clear();
                        Dialog.alert({
                          title: '提示',
                          message: res.msg
                        })
                      }
                    })
                  }).catch(() => {
                    return false;
                  });
                }else{
                  saveClassChange(savaChangeDatas).then(res=>{
                    if(res.code == 200){
                      data.bussinessIds = res.data;
                      processInstance(data).then(res1=>{
                        if(res1.code == 200){
                          Toast.clear();
                          Dialog.alert({
                            title: '提示',
                            message: '提交审批成功'
                          }).then(() => {
                            this.$router.go(-1);
                          });
                        }
                      })
                    }else if(res.code == 400){
                      Toast.clear();
                      Dialog.alert({
                        title: '提示',
                        message: res.msg
                      })
                    }
                  })
                }
              }else if(res.code==400){
                Toast.clear();
                Dialog.alert({
                  title: '提示',
                  message: res.msg
                })
              }
            })


          }
        }
    }

</script>

<style lang="scss" scoped>
      @import '../../assets/style/mixin';
      @import '../../assets/style/public';
    .formContain{
        background: #fff;
        >table{
            width: 100%;
            border-collapse: collapse;
            td{
                font-size: .56rem;
                color: #444;
                border-bottom: 1px solid #e0e0e0;
                line-height: 2rem;
                text-align: center;
                width: 33.3%;
            }
        }
        ul{
            padding: 0 .54rem;
            .flex{
                justify-content: space-between;
                align-items: center;
                line-height: 2rem;
                border-bottom: 1px solid #e0e0e0;
                padding: 0 .3rem;
                &:nth-last-of-type(1){
                    border: none;
                }
                .label{
                    font-size: .56rem;
                    line-height: 2rem;
                    color: #333333;
                }
                .opinion{
                    font-size: .56rem;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 1.2rem;
                    letter-spacing: 0px;
                    color: #666666;
                    padding-bottom: .3rem;
                }
                div{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    position: relative;
                    flex-grow: 1;
                    span{
                        font-size: .56rem;
                        color: #333;
                    }
                    img{
                        width: .68rem;
                        height: .64rem;
                    }
                    input{
                        color: #323233;
                        text-align: right;
                        font-size: .48rem;
                        padding-right: .48rem;
                        border: none;
                        &:-ms-input-placeholder{
                             color: #aaa;
                             font-size: .48rem;

                        }
                    }
                    .file{
                        width: 2rem;
                        height: 1rem;
                        font-size: 10rem;
                        opacity: 0;
                        position: absolute;
                        right: 0;
                    }
                    .van-cell{
                        font-size: .48rem;
                        padding-right: .48rem;
                        padding: 0;
                        color: #aaa;
                        .van-field__control{
                            color: #aaa;
                        }
                    }

                }
            }
        }
    }
    .foot-button{
        margin-top: 2rem;
        margin-bottom: .4rem;
        .cancel-btn{
            margin-right: 1rem;
        }
    }
    #datetime-picker,#picker{
        position: fixed;
        width: 100%;
        bottom: 0;
    }
  .search{
    position: absolute;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    top: 43px;
    left: -14px;
    z-index: 9;
    max-height: 16rem;
    overflow-y: scroll;
    li{
      border-bottom: 1px solid #ccc;
      font-size: 14px;
      height: 1.5rem;
      line-height: 1.5rem;
      background: url('../../assets/images/img/set_person.png') no-repeat 0.1rem;
      background-size: 1rem;
      padding-left: 1.5rem;
    }
  }
      .require{
        color: red;
        margin-right: 4px;
        font-style: inherit;
        font-size: 14px;
      }
</style>
